<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <PageTools :show-before="true">
        <template #before>有0条考勤审批尚未处理</template>
        <!-- 1.2 左边内容 -->
        <template #after>
          <el-button size="mini" type="danger">导入</el-button>
          <el-button size="mini" type="warning">提醒</el-button>
          <el-button size="mini" type="primary">设置</el-button>
          <el-button size="mini" type="default">历史归档</el-button>
          <el-button size="mini" type="primary">报表</el-button>
        </template>
      </PageTools>
      <el-card style="margin: 20px 0">
        <!--部门选项 -->
        <el-row>部门:</el-row>
        <el-checkbox-group v-model="departmentList">
          <el-checkbox
            v-for="(item, index) in depts"
            :key="index"
            :label="item"
          ></el-checkbox>
        </el-checkbox-group>
        <!-- 考勤 -->
        <el-row style="margin-top: 20px"
          >考勤状态:
          <el-radio-group v-model="attendList">
            <el-radio v-for="val in stateList" :key="val.id" :label="val.id">{{
              val.value
            }}</el-radio>
          </el-radio-group>
        </el-row>
      </el-card>
      <!-- 列表 -->
      <el-card>
        <el-table :data="showList">
          <el-table-column fixed label="序号" type="index" width="50" />
          <el-table-column label="姓名" prop="username" width="80" />
          <el-table-column label="工号" prop="workNumber" width="120" />
          <el-table-column label="部门" prop="departmentName" width="120" />
          <el-table-column label="手机" prop="mobile" width="200" />
          <template v-if="list.length > 0">
            <el-table-column
              v-for="(item, index) in list[0].attendanceRecord"
              :key="index"
              width="100"
            >
              <template #header>
                {{ item.day | formatTime }}
              </template>
              <template #default="{ row }">
                <span
                  v-if="
                    showAllAttend ||
                    attendList == row.attendanceRecord[index].adtStatue
                  "
                >
                  {{ row.attendanceRecord[index].adtStatue | formatEmployment }}
                </span>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :total="params.total"
            :page-size="params.pagesize"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from "@/api/attendances";
import attendanceEnum from "@/api/constant/attendance";
import { getDepartmentList } from "@/api/departments";
export default {
  data: () => ({
    // 考勤列表
    list: [],
    params: {
      page: 1,
      pagesize: 10,
      total: 0,
    },
    // 部门列表
    depts: [],
    // 考勤状态列表
    stateList: [],
    // 部门筛选
    departmentList: [],
    // 考勤状态筛选
    attendList: "",
    // 筛选考勤列表
    filterList: [],
    // 展示考勤列表
    showList: [],
    // 显示全部考勤状态
    showAllAttend: true,
  }),
  created() {
    this.getAttendancesListMock();
    this.getDepartmentList();
  },
  mounted() {
    this.stateList = attendanceEnum.holidayType;
  },
  methods: {
    async getDepartmentList() {
      const { depts } = await getDepartmentList();
      this.depts = depts.map((item) => {
        return item.name;
      });
    },

    async getAttendancesListMock() {
      const resMock = await getAttendancesListMock();
      this.list = resMock.rows;
      this.showList = this.list.slice(
        this.params.pagesize * (this.params.page - 1),
        this.params.pagesize * this.params.page
      );
      // console.log(this.list);
      this.params.total = resMock.total;
    },
    // 分页
    currentChange(newPage) {
      this.params.page = newPage;
      this.getAttendancesListMock();
    },
  },

  watch: {
    departmentList(value) {
      if (value.length === 0) {
        this.showList = this.list;
      } else {
        this.showList = this.list.filter((v) => {
          return value.indexOf(v.departmentName) !== -1;
        });
      }
    },
    // 筛选考勤状态
    attendList() {
      this.showAllAttend = false;
    },
  },

  filters: {
    formatEmployment(cell) {
      const res = attendanceEnum.holidayType.find((v) => +v.id === +cell);
      return res.value;
    },
    formatTime(value) {
      // value + "" 变成字符串模式
      const date = value + "";
      const month = date.slice(4, 6);
      const date2 = date.slice(6);
      return month + "/" + date2;
    },
  },
};
</script>
<style>
</style>